<template>
  <Tooltip placement="top">
    <template #title>
      <span>查询</span>
    </template>
    <Popover placement="bottomLeft" trigger="click" @visible-change="handleChange">
      <template #content>
        <div class="flex search-content">
          <Input
            v-model:value.trim="searchText"
            :placeholder="`请输入${column.customTitle}`"
            style="width: 200px; margin-right: 15px"
          />
          <Button size="small" type="link" @click="handleSearch"> 查询 </Button>
          <Button size="small" type="link" @click="reset"> 重置 </Button>
        </div>
      </template>
      <SearchOutlined style="font-size: 16px; margin-left: 10px"
    /></Popover>
  </Tooltip>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { Tooltip, Popover, Button, Input } from 'ant-design-vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { BasicColumn } from '/@/components/Table';

  const props = defineProps({
    column: {
      type: Object as PropType<BasicColumn>,
      default: () => {},
    },
    value: {
      type: Object,
      default: () => {},
    },
  });

  const searchText = computed({
    get: () => {
      for (let i in props.value) {
        if (i === props.column.dataIndex) {
          return props.value[i];
        }
      }
      return '';
    },
    set: (val) => {
      console.log(val);
      emit('update:value', {
        ...props.value,
        [props.column.dataIndex as string]: val,
      });
    },
  });

  const emit = defineEmits(['search', 'reset', 'update:value']);

  // const searchText = ref('');

  // 重置
  const reset = () => {
    searchText.value = '';
    emit('reset', props.column);
  };

  // 查询
  const handleSearch = () => {
    emit('search', {
      column: props.column,
      value: searchText.value,
    });
  };

  const handleChange = (visible) => {
    console.log(visible);
  };
</script>

<style lang="less" scoped>
  .search-content {
    align-items: center;
  }
</style>
